<!-- 评论的回复 -->
<template>
  <div>
    <van-nav-bar :title="count + '条回复'" @click-left="$emit('close')">
      <van-icon name="cross" slot="left" />
    </van-nav-bar>
    <CommentItem :comment="comment" />
    <van-divider />
    <CommentList :list="replyList" :source="comment.com_id" :type="'c'" />

    <div class="footer">
      <van-button type="default" @click="showReply = true">写评论</van-button>
    </div>

    <van-popup v-model="showReply" position="bottom">
      <PublishComment
        :articleId="articleId"
        :traget="comment.com_id"
        @post-success="successreply"
      />
    </van-popup>
  </div>
</template>

<script>
import CommentItem from "./comment-item.vue";
import CommentList from "./comment-list.vue";
import PublishComment from "./publishComment.vue";
export default {
  name: "CommentReply",
  data() {
    return {
      count: 0,
      replyList: [],
      showReply: false,
    };
  },
  props: ["comment", "articleId"],
  methods: {
    successreply(reply) {
      console.log(reply);
      this.replyList.unshift(reply);
      this.comment.reply_count++;
      this.showReply = false;
    },
  },
  components: {
    CommentItem,
    CommentList,
    PublishComment,
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: white;
  .van-nav-bar__title {
    color: black;
  }
}

.footer {
  height: 44px;
  line-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  background-color: white;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 15px;
  border-top: 1px solid #cccccc;
  .van-button {
    width: 40%;
    height: 35px;
    border-radius: 15px;
    font-size: 13px;
    color: #9a9797;
  }
}
</style>
